<!-- 技术成熟度 -->
<template>
  <div>
    <div id="technologyMaturity" class="chart"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { resize, spaceTxt } from "@/utils/utils";
import { number } from "echarts";
export default {
  mixins: [resize],
  props: {
    chartData: {},
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
      doc_count: [],
      //列表数据
      tableData: {
        tit: [],
        content: [],
      },
    };
  },
  computed: {
    ...mapState(["curChartConfig"]),
  },
  watch: {
    chartData(newv,ov) {
      this.init(newv[0].line_mixed);
    },
  },
  mounted() {
    this.chart = this.$echarts.init(
      document.getElementById("technologyMaturity")
    );
    this.init(this.chartData[0].line_mixed);
  },
  methods: {
    init(data) {
      if (this.chartData === {}) {
        return;
      }
      // 从接口获取数据 存入data
      let x1 = data.x1;
      let now_status = Number(data.now_status[0]);
      let curve = data.curve;
      // 将数据分为两组 _dataSolid：历史数据 _dataDotted：将来数据 ； 数据对应到 option.series 中。
      let _dataSolid = [];
      let _dataDotted = [];
      curve.map((item, index) => {
        if (x1[index] < now_status) {
          _dataSolid.push(item);
          _dataDotted.push("");
        } else if (x1[index] == now_status) {
          _dataSolid.push(item);
          _dataDotted.push(item);
        } else {
          _dataSolid.push("");
          _dataDotted.push(item);
        }
      });

      const option = {
        title: {
          text: "技术成熟度曲线",
        },
        xAxis: {
          data: x1,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
        },
        grid: {
          left: 40,
          right: 0,
          top: 50,
          bottom: 30,
        },
        series: [
          {
            type: "line",
            smooth: true,
            data: _dataSolid,
            lineStyle: {
              type: "solid",
              color: "#5470c6",
            },
            itemStyle: {
              color: "#5470c6",
            },
          },
          {
            type: "line",
            smooth: true,
            data: _dataDotted,
            markArea: {
              data: [
                [
                  {
                    name: "概念期",
                    xAxis: 0,
                    itemStyle: {
                      color: "rgba(176, 97, 124, 0.1)",
                    },
                  },
                  {
                    xAxis: data["10_year"],
                  },
                ],
                [
                  {
                    itemStyle: {
                      color: "rgba(129, 90, 201, 0.1)",
                    },
                    name: "原型期",
                    xAxis: data["10_year"],
                  },
                  {
                    xAxis: data["50_year"],
                  },
                ],
                [
                  {
                    name: "应用期",
                    itemStyle: {
                      color: "rgba(165, 201, 119, 0.1)",
                    },
                    xAxis: data["50_year"],
                  },
                  {
                    xAxis: data["90_year"],
                  },
                ],
                [
                  {
                    name: "成熟期",
                    itemStyle: {
                      color: "rgba(81, 129, 224, 0.1)",
                    },
                    xAxis: data["90_year"],
                  },
                  {
                    xAxis: 2029,
                  },
                ],
              ],
            },
            markPoint: {
              itemStyle: {
                color: "red", // 标记点的颜色
                borderWidth: 1, // 标记点的边框宽度
                borderColor: "black", // 标记点的边框颜色
              },
              data: [
                { name: "now", coord: data.now_status }, // x1, y1 为标记点的坐标
              ],
            },
            lineStyle: {
              type: "dotted",
              color: "#5470c6",
            },
            itemStyle: {
              color: "#5470c6",
            },
          },
        ],
      };

      this.chart.clear();
      this.chart.setOption(option, true);

      this.$emit("chartDom", this.chart);

      // 后台报告下载
      this.chart.on("finished", () => {
        let tempId = this.$route.query.tempId;
        if (tempId) {
          this.getEchartImg(this.chart.getDataURL());
        }
      });
      this.tableData.content = [];
      // 数据导出excle
      x1.map((item, index) => {
        this.tableData.content.push([index + 1, item, curve[index]]);
      });
    },
    expert(form) {
      let data = JSON.parse(JSON.stringify(this.chartData[0].line_mixed));
      let num = 0;
      if (form.name == 1) {
        num = data.now_status[0] - Math.ceil((Number(data["10_year"]) + data.x1[0]) / 2);
      }
      if (form.name == 2) {
        num =
          data.now_status[0] -
          Math.ceil((Number(data["50_year"]) + Number(data["10_year"])) / 2);
      }
      if (form.name == 3) {
        num =
          data.now_status[0] -
          Math.ceil((Number(data["90_year"]) + Number(data["50_year"])) / 2);
      }
      if (form.name == 4) {
        num =
          data.now_status[0] -
          Math.ceil((data.x1[data.x1.length - 1] + Number(data["90_year"])) / 2);
      }
      let ax1 = [];
      data.x1.map((item) => {
        ax1.push(item + num);
      });
      data.x1 = ax1;
      data["10_year"] = String(Number(data["10_year"]) + num);
      data["50_year"] = String(Number(data["50_year"]) + num);
      data["70_year"] = String(Number(data["70_year"]) + num);
      data["90_year"] = String(Number(data["90_year"]) + num);
      // 增加判断 是否有
      let iindex = ax1.findIndex((item) => {
        return item == data.now_status[0];
      });
      data.now_status[1] = data.curve[iindex];
      this.init(data);
    },
    getEchartImg(base) {
      window.echartImg = base;
    },
    // 导出数据
    exportData() {
      let aoa = [];
      this.tableData.tit = ["序号", "时间", "技术成熟度"];
      aoa = [this.tableData.tit, ...this.tableData.content];
      var ws =
        XLSX.utils.aoa_to_sheet(aoa); /* 新建空workbook，然后加入worksheet */
      var wb = XLSX.utils.book_new(); /*新建book*/
      XLSX.utils.book_append_sheet(
        wb,
        ws,
        name
      ); /* 生成xlsx文件(book,sheet数据,sheet命名) */
      XLSX.writeFile(wb, `技术成熟度分析数据.xlsx`);
    },
  },

  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: calc(100vh - 4.5rem);
  padding-top: 20px;
}
</style>
